<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artist-production.css" />

	</head>

	<body>
		<header class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-pull-right iconfont">&#xe619;</a>
			<h1 class="mui-title" id="name"></h1>
		</header>
		<div class="mui-content">
			<!--优酷视频播放器-->
			<div id="player">
				<div id="dataConnected" class="mui-text-center">
					<p>正在使用移动网络</p>
					<button class="mui-btn btn-outlined">继续播放</button>
				</div>
			</div>
			<!--作品名，标签，人气等-->
			<div id="production_mid">
				<div class="production-info">
					<p id="production_mid_tag"><span id="label"></span>|<span id="type"></span></p>
					<p id="production_mid_info">人气：<span id="playNum"></span>类别：<span id="kind"></span></p>
				</div>
				<div class="like">
					<i class="iconfont">&#xe6d7;</i><i id="praiseNum"></i>
				</div>
			</div>
			<!--三个标签导航-->
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						基本信息
					</a>
					<a class="mui-control-item" href="#item2mobile">
						评论 / <span id="review_count"></span>
					</a>
					<a class="mui-control-item" href="#item3mobile">
						委托客服
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="introdue">
									<p class="mui-ellipsis-2" id="description"></p>
									<a id="introdue_open" href="javascript:;">[展开]</a>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div id="production_review">
									<ul class="mui-table-view" id="review_list">
										<!--<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="../images/jinchi.png">
												<div class="mui-media-body">
													<p class="review_body_name mui-pull-left">过往</p>
													<p class="review_body_date mui-pull-right">6月6日&nbsp;21:21</p><br />
													<p class="mui-ellipsis-2 review_body_text">库尔班江为了这部片子掏空了身家</p>
												</div>
											</a>
										</li>-->
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div id="service">
									<b class="service_title">委托说明：</b>
									<br />
									<p class="service_text">演艺快捷通道，将你的演艺需求，详细的告诉演得好客服人员，以便客服人员尽快落实艺人与档期安排。</p>
									<br />
									<b class="service_title">联系方式：</b>
									<br />
									<p class="service_text">客服人员：ann@yandehao.com<br />
										<span class="service_text2">andy@yandehao.com</span><br /> 活动支持：angel@yandehao.com
										<br /> 舞台支持：alex@yandehao.com
										<br /> 人事招聘：hr@yandehao.com
										<br />
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--发表评论-->
			<div id="review" class="mui-popover mui-popover-action">
				<div class="mui-input-row">
					<textarea id="review-input" rows="5" placeholder="期待你的精彩评论"></textarea>
				</div>
				<button class="mui-btn mui-pull-left btn-outlined" id="clear">清空</button>
				<button class="mui-btn mui-pull-right btn-main" id="addReview">发表评论</button>
			</div>
		</div>

		<!--底部雇佣按钮-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item review" href="#review">
				<i class="iconfont">&#xe628;</i><span>评论</span>
			</a>
			<a class="mui-tab-item contact">
				联系TA
			</a>
			<a class="mui-tab-item hire">
				雇佣TA
			</a>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/player.youku.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				mui('.mui-scroll-wrapper').scroll();
				var self = plus.webview.currentWebview();
				var perfId = self.perfId;
				var artistPicPath = self.pic;
				var artistName = self.artistName;
				var artistId = self.artistId;
				var myProd = false; // 自己发布的小样
				var videoId; // 优酷视频id
				var praiseNum = 0;
				var netState; // 当前网络状态
				// 数据网络连接提示
				var dataConnected = document.getElementById("dataConnected");
				var reviewList = document.getElementById("review_list");
				var lazyLoad = mui(reviewList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				
				Common.ajax({
					url : baseURL + 'artistOpus/getOpusById/' + perfId + '.json'
				}, function(data) {
					if(data.code == 1) {
						console.log(JSON.stringify(data));
						if(data.author === '1') {
							myProd = true;
						} else {
							if(data.isGood) {
								$(".like").addClass('love').find('i.iconfont').html('&#xe6b5;');
							}
						}
						$.each(data.result, function(i, o) {
							if(!/^(description|evaluationOpusList|fileName|type|praiseNum)$/.test(i)) {
								$("#" + i).text(o);
							} else {
								switch(i) {
									case 'description':
										var descNode = document.getElementById("description");
										if(!o) {
											Common.showState(descNode.parentNode, '&#xe62b;', '暂未填写', 20);
										} else {
											descNode.innerText = o;
										}
										break;
									case 'evaluationOpusList': // 小样/作品的评价列表
										$("#review_count").text(o.length)
										if(o.length) {
											for(var i = 0; i < o.length; i++) {
												var headPic = Common.artistPic + o[i].releaseid + '.jpg?' + Math.random();
												createReviewList(headPic, o[i].name, o[i].releaseTime.substr(0, 14), o[i].description);
											}
											lazyLoad.refresh(true);
										} else {
											Common.showState(reviewList, '&#xe62b;', '还没有评论', 20);
										}
										break;
									case 'fileName':
										videoId = o;
										netState = plus.networkinfo.getCurrentType();
										if(netState == 3 || Common.getUniSetting().dataAutoPlay) {
											showVideo(o);
										} else {
											$(dataConnected).show();
										}
										break;
									case 'type': // 作品类型
										if(o == '11') {
											$("#type").text('小样，视频');
										} else if(o == '12') {
											$("#type").text('小样，音频');
										} else if(o == '21') {
											$("#type").text('作品，视频');
										} else {
											$("#type").text('作品，音频');
										}
										break;
									case 'praiseNum': // 点赞数
										praiseNum = o;
										$("#praiseNum").text(o);
										break;
									default:
										break;
								}
							}
						});
					} else {
						mui.toast(data.msg);
					}
					plus.nativeUI.closeWaiting();
				}, function(xhr) {
					plus.nativeUI.closeWaiting();
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				
				// 使用手机流量播放视频
				mui(dataConnected).on('tap', 'button', function() {
					showVideo(videoId);
					mui.toast('正在使用数据流量播放');
				})
				
				// 连接WIFI后加载视频
				document.addEventListener('netchange', function() {
					netState = plus.networkinfo.getCurrentType();
					if(netState == 3) {
						showVideo(videoId);
					}
				})
				
				// 显示播放器
				function showVideo(id) {
					$(dataConnected).hide();
					var player = new YKU.Player('player', {
						styleid: '0',
						client_id: Common.playerClient_id,
						vid: id,
						newPlayer: true,
						autoplay: false,
						show_related: false
					});
				}
				
				// 动态高度
				var aheight = $(window).height() - 95 - $("#player").outerHeight() - $("#production_mid").outerHeight();
				$(".mui-slider-group, .mui-scroll-wrapper").css('height', aheight + 'px');
				
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				mui('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
	
				// 小样详细介绍展开收起
				document.getElementById("introdue_open").onclick = function() {
					opentext = $('#introdue_open').text();
					if(opentext == '[展开]') {
						document.getElementById("description").style.webkitLineClamp = 15;
						$('#introdue_open').text('[收起]');
					} else {
						document.getElementById("description").style.webkitLineClamp = 2;
						$('#introdue_open').text('[展开]');
					}
				}
	
				// 点赞
				mui('#production_mid').on('tap', '.like', function(e) {
					if(User.islogin()) {
						if(myProd) {
							mui.toast('自己发布的作品不可以点赞');
						} else {
							var url = baseURL + 'evaluate/inGood/' + perfId + '/2/';
							var self = this;
							if(!$(self).hasClass('love')) { // 点赞
								url += '1.json?uid=24';
								console.log(url);
								Common.ajax({
									url : url
								}, function(data) {
									console.log(JSON.stringify(data));
									if(data.code == 1) {
										$(self).addClass('love').find('i.iconfont').html('&#xe6b5;')
											.siblings('i#praiseNum').text(++praiseNum);
										mui.toast('操作成功');
									} else {
										mui.toast('操作失败，请稍后再试');
									}
								}, function(xhr) {
									mui.toast('网络异常，请稍后再试');
									console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
								})
							} else { // 取消赞
								url += '0.json?uid=24';
								console.log(url);
								Common.ajax({
									url : url
								}, function(data) {
									console.log(JSON.stringify(data));
									if(data.code == 1) {
										$(self).removeClass('love').find('i.iconfont').html('&#xe6d7;')
											.siblings('i#praiseNum').text(--praiseNum);
										mui.toast('操作成功');
									} else {
										mui.toast('操作失败，请稍后再试');
									}
								}, function(xhr) {
									mui.toast('网络异常，请稍后再试');
									console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
								})
							}
						}
					} else {
						mui.toast('请先登录');
					}
				})

				// 评论
				var review = document.getElementById('review-input');
				mui('nav').on('tap', 'a.review', function() {
					if(myProd) {
						mui.toast('自己发布的作品不可以评论');
						return false;
					}
				})

				mui('#review').on('tap', '#clear', function() {
					review.value = '';
				})

				mui('#review').on('tap', '#addReview', function() {
					if(review.value) {
						var url = baseURL + 'artistOpus/comment/' + perfId + '.json?comment=' + review.value;
						console.log(url);
						Common.ajax({
								url : url
							}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('评论成功');
								plus.webview.currentWebview().reload(true);
								mui('.mui-popover').popover('hide');
							} else {
								mui.toast('操作失败，请稍后再试');
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('评论不能为空');
					}
				})

				/**
				 * @param {Object} src			评论用户头像路径
				 * @param {Object} name			评论人昵称
				 * @param {Object} time			评论时间
				 * @param {Object} content		评论内容
				 */
				function createReviewList(src, name, time, content) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					var liStr = '';
					liStr += '<a href="javascript:;"><img class="mui-media-object mui-pull-left" data-lazyload="' + src + '">';
					liStr += '<div class="mui-media-body"><p class="review_body_name mui-pull-left">' + name + '</p>';
					liStr += '<p class="review_body_date mui-pull-right">' + time + '</p><br />';
					liStr += '<p class="mui-ellipsis-2 review_body_text">' + content + '</p></div></a>';
					li.innerHTML = liStr;
					reviewList.appendChild(li);
				}

				// 评论、联系、雇佣
				mui('nav').on('tap', 'a', function() {
					if(User.islogin()) {
						if($(this).hasClass('review')) { // 评论
							
						} else if($(this).hasClass('contact')){ // 联系TA
							Common.openWindow('single-chat.html', {
								releaseId: artistId,
								pic: artistPicPath,
								sName: artistName
							});
						} else { // 雇佣TA
							
						}
					} else {
						mui.toast('请先登录');
						return false;
					}
				})
			})
		</script>
	</body>

</html>